<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            outline: 1px red solid;
        }

        #show{
            height: 300px;
            width: 300px;
            position: absolute;
            left:500px;
            top:200px;
        }
        #showScore{
            width: 300px;
            height:60px;
            background: #ccc;
        }
        #showGame{
            width: 300px;
            height: auto;
        }
        button{
            width:150px;
            height: 30px;
            position: absolute;
            left:500px;
            top:150px;
        }

        #time{
            width:120px;
            height: 30px;
            position: absolute;
            left:680px;
            top:150px;
            text-align: center;
            color: #fff;
            background: #000;
            font-size: 30px;
            line-height: 30px;
        }

        input{
            width:20px;
            height: 30px;
            margin-left: 5px;
            margin-top: 5px;
        }
    </style>

   <script>
       function $(id){
           return document.getElementById(id);
       }
       window.onload=function(){
             var time = $("time");
             var  btn = $("btn");
             var showdiv = $("showGame");
             var score = $("score");
              var num=0 ;
            btn.onclick=function(){
                btn.disabled=true;
               num = Math.ceil(Math.random()*60);
                showCheckBox(num);
               var t = setInterval(function(){
                     var i = parseInt(time.innerHTML);
                    i--;
                   time.innerHTML=i;
                   if(i==0){
                       clearInterval(t);
                       alert("游戏结束！ 你的分数为："+score.innerHTML);
                        time.innerHTML=60;
                       showdiv.innerHTML="";
                       btn.disabled=false;
                   }

               },1000);
             }

           function showCheckBox(num){
                var content = document.createDocumentFragment();

                 for(var i=1;i<=60;i++){
                       var input = document.createElement("input");
                       input.type="radio";
                       input.value=i;
                     if(i==num){
                          input.checked=true;
                      }
                     content.appendChild(input);
                 }
               showdiv.appendChild(content) ;
           }
            showdiv.onclick=function(e){
               var ck  = e.srcElement|| e.target;
               //alert(ck.value);
              var i =  parseInt(score.innerHTML);
                if(num==ck.value){
                     i++;
                     showdiv.innerHTML="";
                    num = Math.ceil(Math.random()*60);
                     showCheckBox(num);
                  }else{
                         showdiv.innerHTML="";
                          showCheckBox(num);
                    if(i!=0){
                        i--;
                    }
                }
               score.innerHTML=i;
           }


       }

   </script>


</head>
<body>

 <button id="btn">开始</button>
  <div id="time">60</div>

<div id="show">
      <div id="showScore">
          <p>分数:&nbsp;&nbsp;<span id="score">0</span></p>
      </div>
      <div id="showGame"></div>
</div>

</body>
</html>